<template>
  <div>
    <!-- :destroy-on-close="true",点击取消再次点击编辑过快时，回显的图片会有动画抖动，实施标签属性实现，抖动动画前销毁 -->
    <el-dialog
      :title="formData.id ? '编辑客户' : '添加客户'"
      :visible="showDialog"
      :destroy-on-close="true"
      @close="closeFn"
    >
      <el-form
        ref="formData"
        :model="formData"
        class="tcwidth"
        label-width="100px"
        :rules="rules"
      >
        <el-form-item label="经纪" prop="agent">
          <el-select v-model="formData.agent" label="经纪">
            <!-- 遍历 -->
            <el-option
              v-for="item in agentList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="formData.name" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="formData.email" />
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="formData.phone" />
        </el-form-item>
        <el-form-item label="微信" prop="wechat">
          <el-input v-model="formData.wechat" />
        </el-form-item>
        <el-form-item label="描述" prop="desc" class="hg">
          <el-input v-model="formData.desc" type="textarea" />
        </el-form-item>
        <el-form-item label="封面">
          <!-- <el-upload
            action="#"
            :file-list="fileList"
            list-type="picture-card"
            :http-request="upload"
          >
            <i class="el-icon-plus" />
          </el-upload> -->
          <!-- 上传图片 -->
          <uploadSomeImg ref="formImg" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          size="mini"
          type="primary"
          @click="confirmFn"
        >确 定</el-button>
        <el-button size="mini" @click="closeFn">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { addClients, getClients, updateClients } from '@/api/clients'
import { getAgentsList } from '@/api/agents'
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // 上传声明
      fileList: [],
      agentList: [],
      // 定义数据
      formData: {
        agent: '',
        name: '',
        email: '',
        phone: '',
        wechat: '',
        desc: '',
        image: ''
      },
      // 校验表单
      rules: {
        name: [{ required: true, message: '该项不能为空', trigger: 'blur' }],
        desc: [{ required: true, message: '该项不能为空', trigger: 'blur' }]
      }
    }
  },
  async created() {
    // 搜索经纪人
    const { data } = await getAgentsList()
    // console.log(111, data)
    this.agentList = data
  },
  methods: {
    // upload(parmes) {
    //   console.log('自定义上传函数逻辑', parmes)
    //   // 使用腾讯云上传逻辑

    // 取消关闭弹出
    closeFn() {
      this.$emit('update:showDialog', false)
      // 清空
      this.$refs.formImg.fileList = []

      this.formData = {
        agent: '',
        name: '',
        email: '',
        phone: '',
        wechat: '',
        desc: ''
      }
    },
    // // 编辑数据回填
    // async updateClients(id) {
    //   const res = await updateClients(id)
    //   console.log(1111, 'res: ', res)
    //   this.formData = res.data
    //   console.log(11, this.formData)

    //   // 隐藏进度条
    //   this.$refs.formImg.percentage = 100
    // },
    // 确定// 弹出框确定 新增/编辑
    async confirmFn(id) {
      // 校验
      this.$refs.formData.validate()
      // 判断编辑还是添加
      if (this.formData.id) {
        // 数组改造
        const newList = this.$refs.formImg.fileList.map((item) => {
          return item.url
        })
        // console.log(newList)
        this.formData.image = newList[0]
        // 编辑
        await updateClients(this.formData)
        // 调用接口
        this.formData.image = await this.$refs.formImg.fileList[0].url
      } else {
        // 图片
        this.formData.image = await this.$refs.formImg.fileList[0].url
        // 调用接口实现新增
        await addClients(this.formData)
        // console.log(333, this.formData)
      }
      // 关闭弹出
      this.closeFn()
      // 子传父调用列表接口实现刷新
      this.$emit('list')
    },
    // 编辑
    async editFnn(id) {
      // 调用单个编辑接口实现回显数据
      const res = await getClients(id)
      // console.log(888, res)// 获取回显数据
      this.formData = res.data // 实施回显

      this.$refs.formImg.fileList.push({ url: this.formData.image })
    }
  }
}
</script>

<style lang="scss" scoped></style>
